<template>
	<view>
		<!-- 商品详情 -->
		<view class="itemImgWrapper">
			<!-- 图片 -->
			<!-- 轮播 -->
			<swiper class="swipInner" indicator-dots autoplay circular>
				<swiper-item v-for="o in goodCarouselList">
					<image class="imgDetail" :src="o.imgSrc" alt="" mode="aspectFill">
				</swiper-item>
			</swiper>
		</view>
		<view class="detailInfo">
			<!-- 详细信息 -->
			<view class="info1">
				<view class="price">￥{{goodDetail.price}}</view>
				<view class="text">{{goodDetail.title}} {{goodDetail.weight}}{{goodDetail.eng}}</view>
			</view>
			<view class="info2" style="background-color: #fff;">
				<uni-grid :column="4" border-color="#03a9f4">
					<uni-grid-item :index="0" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{goodDetail.condition}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">贮存条件</view>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="1" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{goodDetail.breed}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">品种</view>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="2" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{goodDetail.typeName}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">商品类型</view>
						</view>
					</uni-grid-item>
					<uni-grid-item :index="3" style="float: right;">
						<view class="grid-item-box" style="line-height: 80rpx;">
							<view style="font-size: 43rpx; text-align: center; ">{{goodDetail.total}}</view>
							<view style="font-size: 36rpx; text-align: center;color: #999999;">库存</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view class="midPart">
				<view class="comment" @click="jumpCommentDetail">
					<view class="top">
						<view class="text">用户评价</view>
						<view class="icon">
							<uni-icons type="right" size="30"></uni-icons>
						</view>
					</view>
					<view class="bottom">
						<view class="img">
							<image class="userImg" :src="comment.imgSrc" mode=""></image>
						</view>
						<view class="nickName">{{comment.nickName}}</view>
						<view class="createTime">{{comment.createTime}}</view>
						<view class="content">{{comment.content}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="uni-container">
					<!-- <uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup"
							@click="onClick" @buttonClick="buttonClick" /> -->
					<uni-goods-nav :fill="true" :options="options" :button-group="customButtonGroup1" @click="onClick"
						@buttonClick="buttonClick" style="margin-top: 20px;" />
					<!-- <view class="goods-carts">
						<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
							@buttonClick="buttonClick" />
					</view> -->

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(e) {
			this.itemId = e.id;
			this.selGoodDetailById(this.itemId);
			this.selGoodCarouselById(this.itemId);
			this.selGoodComment();
		},
		data() {
			return {
				commentList: [],
				comment: {},
				goodCarouselList: [],
				goodDetail: {},
				options: [{
					// icon: 'chat',
					// text: '客服'
				}, {
					// icon: 'shop',
					// text: '店铺',
					// info: 2,
					// infoBackgroundColor: '#007aff',
					// infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					// info: 0,
				}],
				customButtonGroup1: [{
					text: '加入购物车',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],
				itemId: ""
			};
		},
		methods: {
			jumpCommentDetail() {
				uni.navigateTo({
					url: "/pages/commentDetail/commentDetail?itemId=" + this.itemId
				})
			},
			selGoodComment() {
				let jwt = uni.getStorageSync('authority');
				uni.request({
					url: "api/appuser/selGoodComment",
					header: {
						"authority": jwt
					},
					method: 'GET',
					data: {
						itemId: this.itemId
					},
					success: (res) => {
						console.log(res);
						if (res.data.code == 200) {
							this.commentList = res.data.data;
						}
						this.comment = this.commentList[0];
						// console.log(this.comment);
						if (this.comment == undefined) {
							this.comment = {};
							this.comment.content = "暂无评价。。。";
						}
					}
				})
			},
			selGoodCarouselById(itemId) {
				uni.request({
					url: "api/appindex/selGoodCarouselById",
					data: {
						itemId: this.itemId
					},
					success: (response) => {
						if (response.statusCode == 200) {
							console.log(response.data.data);
							this.goodCarouselList = response.data.data;
						}
					}
				})
			},
			selGoodDetailById(itemId) {
				uni.request({
					url: 'api/appindex/selGoodDetailById',
					data: {
						itemId: this.itemId
					},
					success: (res) => {
						if (res.statusCode == 200) {
							this.goodDetail = res.data.data;
						}
						// console.log(this.goodDetail);
					}
				})
			},
			onClick(e) {
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
				uni.reLaunch({
					url: "/pages/shoppingCart/shoppingCart"
				})
			},
			buttonClick(e) {
				console.log(e)
				if (e.index == 0) {
					// console.log("添加购物车");
					let jwt = uni.getStorageSync('authority');
					uni.request({
						url: 'api/appuser/addShoppingCart',
						method: 'GET',
						header: {
							"authority": jwt
						},
						data: {
							itemId: this.itemId
						},
						success: (res) => {
							console.log(res);
							if (res.data.code == 200) {
								uni.showToast({
									icon: 'success',
									title: '购物车添加成功'
								})
							} else if (res.data.code == 10000) {
								uni.showToast({
									icon: 'error',
									title: '购物车中已有该商品'
								})
							}
						}
					})

				} else if (e.index == 1) {
					// console.log("购买");
				}
				// this.options[2].info++
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f6;
	}

	.itemImgWrapper {
		width: 750rpx;
		height: 500rpx;
		// border: 1px solid red;

		.swipInner {
			width: 100%;
			height: 100%;

			.imgDetail {
				width: 100%;
				height: 100%;
			}
		}
	}

	.detailInfo {
		margin-top: 10px;

		.info1 {
			width: 700rpx;
			height: 100px;
			margin: 20rpx auto;
			background-color: #fff;
			border-radius: 30rpx;


			.price {
				font-size: 24px;
				color: #ff4b37;
				margin-left: 4rpx;
			}

			.text {
				font-size: 29px;
				margin-left: 5rpx;
			}
		}
	}

	.uni-container {
		position: fixed;
		width: 700rpx;
		z-index: 999;
		bottom: var(--window-bottom);
	}

	.midPart {
		width: 700rpx;
		height: 300rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin: 0 auto;
		margin-top: 50rpx;

		.comment {
			.top {
				// background-color: #ff4b37;
				height: 100rpx;
				border-bottom: 1px solid gray;
				line-height: 100rpx;

				.text {
					float: left;
					font-size: 30rpx;
					margin-left: 20rpx;
				}

				.icon {
					float: right;
					margin-right: 10rpx;
				}
			}

			.bottom {
				.img {
					float: left;
					margin-top: 5rpx;
					margin-left: 5rpx;

					.userImg {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50rpx;
					}
				}

				.nickName {
					float: left;
					width: 280rpx;
					height: 70rpx;
					line-height: 90rpx;
					margin-left: 10rpx;
					// background-color: gray;
				}

				.createTime {
					float: left;
					width: 300rpx;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 25rpx;
				}

				.content {
					float: left;
					// background-color: gray;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>